<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5-9 Bootstrap组件-列表</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7/dist/css/bootstrap.min.css">
    <script src="jquery/jquery-3.4.1.min.js"></script>
    <script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

</head>
<body>

<h5>Bootstrap组件-列表</h5>
<!--
.list-group:代表列表组
.badge:代表状态数
.active:代表选中状态
.disabled:代表禁用状态
.list-group-item-info:代表状态颜色

bootstrap之 Badge 角标(徽章)
给链接、导航等元素嵌套 <span class="badge"> 元素，
可以很醒目的展示新的或未读的信息条目。
添加 .am-badge class 到 <div> 或者 <span> 元素。
-->

<ul class="list-group">
    <li class="list-group-item active">
        这是一个列表
        <span class="badge">14</span>
    </li>
    <li class="list-group-item disabled ">
        这是一个列表
        <span class="badge">14</span>
    </li>
    <li class="list-group-item list-group-item-info">
        这是一个列表
        <span class="badge">14</span>
    </li>

    <li class="list-group-item">
        这是一个列表
        <span class="badge">14</span>
    </li>

    <li class="list-group-item">
        这是一个列表
        <span class="badge">14</span>
    </li>


</ul>

</body>
</html>
